<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="account" label="account" width="180" />
    <el-table-column prop="createTime" label="createTime" width="180" />
    <el-table-column prop="level" label="level" />
  </el-table>
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

<script setup>
import { ref } from 'vue'

const data = Array.from(Array(114), (v, i) => {
  return {
    account: 'uaa' + (i + 1),
    createTime: new Date(Date.now() + Math.ceil(Math.random() * 1000)),
    level: Math.ceil(Math.random() * 10)
  }
})

console.log('data', data);

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

const getData = (page, pageSize) => {
  //请求后台窗口
  tableData.value = data.slice((page - 1) * pageSize, page * pageSize)
  console.log(tableData);
  total.value = data.length
  console.log(total.value);
}
getData(currentPage.value, pageSize.value)

//页面的显示数量变化
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  getData(currentPage.value, val)
}

//页面变化
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  getData(val, pageSize.value)
}
</script>